<template>
  <div class="link">
    <fx-card title="基础用法">
      <fx-link type="default" class="mr10">文字连接</fx-link>
      <fx-link type="primary" class="mr10">文字连接</fx-link>
      <fx-link type="success" class="mr10">文字连接</fx-link>
      <fx-link type="warning" class="mr10">文字连接</fx-link>
      <fx-link type="error" class="mr10">文字连接</fx-link>
      <fx-link type="info">文字连接</fx-link>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="禁用">
      <fx-link type="default" disabled class="mr10">文字连接</fx-link>
      <fx-link type="primary" disabled class="mr10">文字连接</fx-link>
      <fx-link type="success" disabled class="mr10">文字连接</fx-link>
      <fx-link type="warning" disabled class="mr10">文字连接</fx-link>
      <fx-link type="error" disabled class="mr10">文字连接</fx-link>
      <fx-link type="info" disabled>文字连接</fx-link>
      <template #hide>
        <pre v-highlight="disabled"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="连接">
      <fx-link type="primary" href="http://www.lianlian.fun:5985/#/layout/button" target="_blank" class="mr10">
        FiveXu UI
      </fx-link>
       <fx-link type="primary" href="http://www.lianlian.fun:5987/#/home" target="_blank" class="mr10">
        FiveXu个人简历
      </fx-link>
      <fx-link type="primary" href="http://www.lianlian.fun:5986/#/sokoban" target="_blank" class="mr10">
        FiveXu自制游戏
      </fx-link>
      <template #hide>
        <pre v-highlight="link"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="下划线">
      <fx-link type="primary" class="mr10" :underline="false">无下划线</fx-link>
      <fx-link type="primary">有下划线</fx-link>
      <template #hide>
        <pre v-highlight="underline"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="图标">
      <fx-link type="primary" class="mr10" icon="icon-edit">编辑</fx-link>
      <fx-link type="error">删除 <i class="iconfont icon-trash"/></fx-link>
      <template #hide>
        <pre v-highlight="icon"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="API 属性">
      <fx-table :data="linkApi">
        <fx-table-item prop="name" label="属性"></fx-table-item>
        <fx-table-item prop="directions" label="说明"></fx-table-item>
        <fx-table-item prop="type" label="类型"></fx-table-item>
        <fx-table-item prop="value" label="可选值"></fx-table-item>
        <fx-table-item prop="default" label="默认"></fx-table-item>
      </fx-table>
    </fx-card>
  </div>
</template>

<script setup lang="ts">
const linkApi = [
  {
    name: 'type',
    directions: '连接类型',
    type: 'String',
    value: 'primary | success | warning | error | default | info',
    default: 'default'
  },
  { name: 'disabled', directions: '是否禁用', type: 'Boolean', default: 'false' },
  { name: 'underline', directions: '是否下划线', type: 'Boolean', default: 'false' },
  { name: 'icon', directions: '左侧图标', type: 'String' },
  { name: 'href', directions: '连接地址', type: 'String' }
]

const base = `<fx-link type="default" class="mr10">文字连接</fx-link>
<fx-link type="primary" class="mr10">文字连接</fx-link>
<fx-link type="success" class="mr10">文字连接</fx-link>
<fx-link type="warning" class="mr10">文字连接</fx-link>
<fx-link type="error" class="mr10">文字连接</fx-link>
<fx-link type="info">文字连接</fx-link>`

const disabled = `<fx-link type="default" disabled class="mr10">文字连接</fx-link>
<fx-link type="primary" disabled class="mr10">文字连接</fx-link>
<fx-link type="success" disabled class="mr10">文字连接</fx-link>
<fx-link type="warning" disabled class="mr10">文字连接</fx-link>
<fx-link type="error" disabled class="mr10">文字连接</fx-link>
<fx-link type="info" disabled>文字连接</fx-link>`

const link = `<fx-link type="primary" href="https://five598.gitee.io/fivexuresume/#/home" class="mr10">
  FiveXu个人简历
</fx-link>
<fx-link type="primary" href="http://five598.gitee.io/game598/#/sokoban" class="mr10">
  FiveXu自制游戏
</fx-link>`

const underline = `<fx-link type="primary" class="mr10" :underline="false">无下划线</fx-link>
<fx-link type="primary">有下划线</fx-link>`

const icon = `<fx-link type="primary" class="mr10" icon="icon-edit">编辑</fx-link>
<fx-link type="error">删除 <i class="iconfont icon-trash"/></fx-link>`
</script>

<style scoped lang="scss">
.link {
}
</style>
